<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>找回密码</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
        body {
            background-color: #F3F3F3;
        }

        .aui-content {
            padding-top: 10%;
        }

        .aui-btn {
            padding: 8px 12px;
        }

        .aui-btn-info {
            background-color: #327AFA;
        }

        .aui-btn-block {
            margin-top: 5px;
            padding: 8px 0;
            font-size: 18px;
            margin: auto;
            width: 94%;
        }

        .aui-input-row {
            border-top: 0px solid #c8c7cc;
            margin-left: 10px;
        }

        .aui-input-row:first-child:after {
            border-top: 0px solid #c8c7cc;
        }

        .aui-btn-row:after {
            border-bottom: 0px solid #c8c7cc;
        }

        .aui-form {
            width: 85%;
            margin: auto;
        }

        .aui-input-addon {
            border-right: 1px solid #c8c7cc;
            padding-right: 10px !important;
        }

        .tips {
            padding-left: 3%;
            padding-bottom: 5%;
        }

        .star {
            color: #FD4F2A;
            float: left;
            height: 10px;
            line-height: 14px;
            padding-right: 1%;
        }

        .tips p {
            color: #686868;
            font-size: 12px;
        }

        #validate {
            width: 48%;
            padding: 10px 6px;
        }
    </style>
</head>
<body>
<div class="aui-content">
    <div class="tips">
        <span class="star">*</span>
        <p>您的手机<span id="usermobile">130********</span>会收到一条含有6位数字的验证码的短信</p>
    </div>
    <div class="aui-form aui-card">
        <div class="aui-input-row">
            <label class="aui-input-addon">验　证　码</label>
            <input type="number" id="validate" class="aui-input validate" placeholder="请输入验证码"/>

            <div class="aui-btn vali" tapmode onclick="getVerify();" id="sendVerify">获取验证码</div>
        </div>
    </div>
    <div class="aui-form aui-card">
        <div class="aui-input-row">
            <label class="aui-input-addon">新　密　码</label>
            <input type="password" id="password"  class="aui-input validate" placeholder="请输入新密码"/>


        </div>
    </div>
    <div class="aui-form aui-card">
        <div class="aui-input-row">
            <label class="aui-input-addon">确认新密码</label>
            <input type="password" id="confirmPassword"  class="aui-input validate" placeholder="请确认密码"/>


        </div>
    </div>
    <div class="aui-btn-row">
        <div class="aui-btn aui-btn-info aui-btn-block" tapmode onclick="confirm();">
            提交
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
    var isinerval, times,mobile="";
    apiready = function () {
        api.parseTapmode();
        mobile = api.pageParam.mobile;
        mobileshow = mobile.substring(0, 3) + "******" + mobile.substring(9, 11);
        var usermobile = $api.byId('usermobile');
        $api.text(usermobile, mobileshow);
    }

    function getVerify() {
        //发送验证码
        var url = 'account/send_verifycode';
        // var data = {};或直接传'' unll
        var data = {};
        data["mobile"] = mobile;
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.success) {
                api.toast({
                    msg: "验证码已发送"
                })
                var sendVerify = $api.byId('sendVerify');
                $api.removeAttr(sendVerify, 'onclick');
                //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
                var readonly_mobile = $api.byId('mobile');
                $api.attr(readonly_mobile, 'readOnly', 'true');
                $api.html(sendVerify, '已发送(<span id="GetVerify">60</span>)');
                times = 60;
                isinerval = setInterval("CountDown()", 1000);

            }
        });

    }

    //登录
    function confirm() {
       var vertifyCode=$("#validate").val();
       var newPassword=$("#password").val();
       var confirmPassword=$("#confirmPassword").val();

       var data={};
       data["mobile"]=mobile;
       data["verifycode"]=vertifyCode;
       data["password"]=newPassword;
       data["confirm_password"]=confirmPassword;
        url = 'account/forget_password';
        ajaxRequest(url, 'post', data, function (ret, err) {

                api.toast({
                    msg:"密码重置成功！"
                })
                setTimeout(function () {
                    api.closeToWin({
                        name:"loginPass_win"
                    })
                },2000)
        });
    }

    function CountDown() {
        if (times < 1) {
            //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
            var readonly_mobile = $api.byId('mobile');
            $api.removeAttr(readonly_mobile, 'readOnly');
            var sendVerify = $api.byId('sendVerify');
            $api.attr(sendVerify, 'onclick', 'getVerify()');
            $api.html(sendVerify, '重新获取');
            clearInterval(isinerval);
            return;
        }
        var getVerify = $api.byId('GetVerify');
        $api.html(getVerify, '' + times + '');
        times--;
    }

</script>
</html>